<!-- 数据格式化 -->
<!-- <template>
    <div>
      <p>发布时间：{{ formattedDate }}</p>
      <p>{{ publishDate }}</p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        publishDate: '2023-10-01T12:00:00Z'
      };
    },
    computed: {
      formattedDate() {
        return new Date(this.publishDate).toLocaleDateString();
      }
    }
  };
  </script> -->

<!-- 复杂逻辑处理 -->
<!-- <template>
    <div>
      <p>总价：{{ totalPrice }}</p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        cartItems: [
          { name: '商品A', price: 100, quantity: 2 },
          { name: '商品B', price: 200, quantity: 1 }
        ]
      };
    },
    computed: {
      totalPrice() {
        return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
      }
    }
  };
  </script> -->

<!-- 条件判断 -->
<!-- <template>
    <div>
      <p v-if="isLoggedIn">欢迎回来，{{ username }}！</p>
      <p v-else>请登录。</p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        user:{
            name: '张三'
        }
      };
    },
    computed: {
      isLoggedIn() {
        return !!this.user;
      },
      username() {
        return this.user ? this.user.name : '';
      }
    }
  };
  </script> -->


<!-- 组合多个数据源 -->
<template>
  <div>
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span>
    <br><br><br>
    
    <button @click="showPopup = true">改名卡</button>
    <popup :visible="showPopup" @close="closePopup">
      <template v-slot:header>
        <h3>改名卡</h3>
      </template>
      <template v-slot:content>
        <form action="">
          <label for="name">名字:</label>
          <input type="text" id="name" name="name" v-model="name" placeholder="请输入你要修改的名字">
        </form>
      </template>
      <template v-slot:footer>
        <button @click="reverseName">提交</button>
      </template>
    </popup>

  </div>
</template>

<script>
import Popup from './zcf/Popup.vue';

export default {
  components: {
    Popup
  },

  data() {
    return {
      showPopup: false,
      firstName: 'liang',
      lastName: 'xinyi'
    };
  },
  methods: {
    reverseName() {
      this.fullName = this.name;
      this.showPopup = false;
      alert('修改成功！');
    },
    closePopup() {
      this.showPopup = false;
    }
  },
  computed: {
    // fullName() {
    //   return `${this.firstName} ${this.lastName}`;
    // }
    fullName: {
      get() {
        return this.firstName + this.lastName;
      },
      set(value) {
        this.firstName = value.slice(0, 1)
        this.lastName = value.slice(1)
      }
    }
  }
};
</script>


<!-- 过滤和排序 -->
<!-- <template>
    <div>
        <ul>
            <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            items: [
                { id: 1, name: '商品A', selected: true },
                { id: 2, name: '商品B', selected: false },
                { id: 3, name: '商品C', selected: true }
            ]
        };
    },
    computed: {
        filteredItems() {
            return this.items.filter(item => item.selected);
        }
    }
};
</script> -->